import React, { Component } from "react";
import moment from "moment";
import CenterItem from "./FocusNewCenter";
import LXSwiper from "./../common/LXSwiper";
import news from "./../../images/icon_news.png";
import hot from "./../../images/icon_hot.png";
import bgImg from "./../../images/bg2.png";
import dian from "./../../images/dian.png";
import styles from "./FocusNew.module.scss";
import api from "./../../serve/api";
import { withRouter } from "react-router-dom";
import titleImg from "./../../images/focusNewsTitle.png";
import placeholder from "./../../images/placeholder.jpg";

class FocusNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      centers: ["会议论坛", "决策调研", "学者观点"],
      focusNews: [],
      hotNews: [],
      forums: [],
      decisions: [],
      viewpoints: [],
      advers: [],
      swiper: [],
      topLeftImg: "",
      topLeftType: "",
      topLeftId: "",
      topCenterImg: "",
      topCenterType: "",
      topCenterId: "",
      topRightImg: "",
      topRightType: "",
      topRightId: ""
    };
    this.onFocusInfo = this.onFocusInfo.bind(this);
  }

  componentDidMount() {
    this.getFocusNews();
    this.getHotNews();
    this.getForum();
    this.getDecision();
    this.getViewpoint();
    this.getAdvertTopLeft();
    this.getAdvertTopCneter();
    this.getAdvertTopRight();
    this.getSwiper();
  }

  async getSwiper() {
    const data = await api.getSwiperApi({});
    if (data && data.code === "000000") {
      this.setState({
        swiper: data.result
      });
    }
  }

  async getFocusNews() {
    const data = await api.listFocusNewsApi({ page: 1, pageSize: 5 });
    if (data && data.code === "000000") {
      this.setState({
        focusNews: data.result
      });
    }
  }

  async getHotNews() {
    const data = await api.listHotNewsApi({ page: 1, pageSize: 7 });
    if (data && data.code === "000000") {
      this.setState({
        hotNews: data.result
      });
    }
  }

  async getForum() {
    const data = await api.listForumApi({ page: 1, pageSize: 6 });
    if (data && data.code === "000000") {
      this.setState({
        forums: data.result
      });
    }
  }

  async getDecision() {
    const data = await api.listDecisionApi({ page: 1, pageSize: 6 });
    if (data && data.code === "000000") {
      this.setState({
        decisions: data.result
      });
    }
  }

  async getViewpoint() {
    const data = await api.listViewpointApi({ page: 1, pageSize: 6 });
    if (data && data.code === "000000") {
      this.setState({
        viewpoints: data.result
      });
    }
  }

  async getAdvertTopLeft() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      position: "1-1"
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          topLeftImg: data.result[0].img,
          topLeftType: data.result[0].type,
          topLeftId: data.result[0].theme_ad_id
        });
      }
    }
  }
  clientThemeAd(type, id) {
    console.log("type", type);
    if (type == "2") this.props.history.push("/mainPage/themeAd/" + id);
  }

  async getAdvertTopCneter() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      position: "1-2"
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          topCenterImg: data.result[0].img,
          topCenterType: data.result[0].type,
          topCenterId: data.result[0].theme_ad_id
        });
      }
    }
  }

  async getAdvertTopRight() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      position: "1-3"
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          topRightImg: data.result[0].img,
          topRightType: data.result[0].type,
          topRightId: data.result[0].theme_ad_id
        });
      }
    }
  }

  //要闻动态更多
  onFocusNewsMore() {
    this.props.history.push("/mainPage/focusNews");
  }

  onHotNewsMore() {
    this.props.history.push("/mainPage/hotNews");
  }

  onFocusInfo(item) {
    if (item) {
      this.props.history.push(`/mainPage/commonDetail/focusNews/${item.id}`);
    }
  }

  onHotNews(item) {
    this.props.history.push(`/mainPage/commonDetail/hotNews/${item.id}`);
  }

  render() {
    const {
      centers,
      focusNews,
      hotNews,
      forums,
      decisions,
      viewpoints,
      advers,
      topLeftType,
      topLeftId,
      topRightId,
      topCenterId,
      topRightType,
      topCenterType,
      swiper
    } = this.state;
    const centerData = [forums, decisions, viewpoints];
    const firstFocusNews = focusNews[0] || {};

    const swiperEls = () => {
      return swiper.slice(0, 5).map(item => {
        return (
          <div
            className={styles.swiper_item}
            key={item.id}
            onClick={() => this.onHotNews(item)}
          >
            <img src={item.img_url || placeholder} alt="" />
            <p>{item.title || ""}</p>
          </div>
        );
      });
    };

    return (
      <div className={styles.focus_new}>
        <div className={styles.news_content}>
          <div className={styles.header}>
            {/* <img src={titleImg} alt=""/> */}
          </div>
          <div className={styles.top}>
            <div className={styles["swiper-container"]}>
              <LXSwiper datas={swiperEls()} showPagination={true} />
            </div>
            <div className={styles.focus}>
              <div className={styles.img_div}>
                <img src={firstFocusNews.img_url || placeholder} alt="" />
                <span onClick={() => this.onFocusInfo(firstFocusNews)}>
                  {firstFocusNews.title || ""}
                </span>
              </div>
              <div className={styles.text_div}>
                {focusNews.slice(1, 4).map((item, index) => {
                  return (
                    <div key={index} onClick={() => this.onFocusInfo(item)}>
                      <img src={dian} alt="" />
                      <span>{item.title}</span>
                    </div>
                  );
                })}
              </div>
              <img className={styles.pos} src={news} alt="" />
              <span
                className={styles.more}
                onClick={() => this.onFocusNewsMore()}
              >
                【更多】
              </span>
            </div>
            <div className={styles.hot}>
              <img className={styles.pos} src={hot} alt="" />
              <span
                className={styles.more}
                onClick={() => this.onHotNewsMore()}
              >
                【更多】
              </span>
              {hotNews &&
                hotNews.map((item, index) => {
                  return (
                    <div key={index}>
                      <span className={styles.time}>
                        {moment(item.public_at).format("MM-DD") || ""}
                      </span>
                      <span
                        className={styles.title}
                        onClick={() => this.onHotNews(item)}
                      >
                        {item.title || ""}
                      </span>
                    </div>
                  );
                })}
            </div>
          </div>
          <div className={styles.center}>
            {centerData.map((item, index) => {
              return (
                <CenterItem
                  history={this.props.history}
                  key={index}
                  item={item}
                  title={centers[index]}
                />
              );
            })}
          </div>
          <div className={styles.bottom}>
            <img
              style={{ width: 309 }}
              src={this.state.topLeftImg}
              alt=""
              onClick={() => this.clientThemeAd(topLeftType, topLeftId)}
            />
            <img
              style={{ width: 649 }}
              src={this.state.topCenterImg}
              alt=""
              onClick={() => this.clientThemeAd(topCenterType, topCenterId)}
            />
            <img
              style={{ width: 312 }}
              src={this.state.topRightImg}
              alt=""
              onClick={() =>
                this.clientThemeAd(this.state.topRightType, topRightId)
              }
            />
          </div>
        </div>
        {/* <img className={styles.bg_img} src={bgImg} alt=""/> */}
      </div>
    );
  }
}
export default withRouter(FocusNew);
